<template>
	<view class="content">
		<view class="title">作业类型（必选）</view>
		<view class="radioContainer">
			<!-- <u-radio-group
			    v-model="work"
				@change="radioChange"
			  >
			    <u-radio
			      v-for="(item, index) in workList"
			      :key="index"
			      :label="item.name"
			      :name="item.name"
				  :class="work == item.name ? 'selectedColor' : ''"
			    >
			    </u-radio>
			  </u-radio-group> -->
			<view v-for="(item, index) in workList" :key="index" class="selectOption" @click="select(item.id)"
				:class="work == item.id ? 'selectedColor' : ''">
				{{item.name}}
			</view>
		</view>
		<view class="btn">
			<u-button type="primary" text="开始填写作业票" :disabled="disabled" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'share'
		},
		data() {
			return {
				work: '',
				disabled: true,
				workList: [{
						id: 1,
						name: '动火'
					},
					{
						id: 2,
						name: '受限空间'
					},
					{
						id: 3,
						name: '高处'
					},
					{
						id: 4,
						name: '吊装'
					},
					{
						id: 5,
						name: '临时用电'
					},
					{
						id: 6,
						name: '盲板抽堵'
					},
					{
						id: 7,
						name: '动土'
					},
					{
						id: 8,
						name: '断路'
					}
				]
			}
		},
		methods: {
			select(index) {
				this.work = index
				if (this.work) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			radioChange() {
				if (this.work) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			submit() {
				let urlStr = ''
				switch (this.work) {
					case 1:
						urlStr = '/work/addHotWork'
						break;
					case 2:
						urlStr = '/work/limitedSpace/index'
						break;
					case 3:
						urlStr = '/work/high/index'
						break;
					case 4:
						urlStr = '/work/lifting/index'
						break;
					case 5:
						urlStr = '/work/temporaryElectricity/index'
						break;
					case 6:
						urlStr = '/work/blindPlate/index'
						break;
					case 7:
						urlStr = '/work/digging/index'
						break;
					case 8:
						urlStr = '/work/circuit/index'
						break;
				}
				uni.navigateTo({
					url: urlStr,
					success(res) {
						console.log('成功啦', res);
					},
					fail(err) {
						console.log('失败啦', err);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		overflow: hidden;
	}

	.title {
		width: 100%;
		font-size: 30rpx;
		margin: 10rpx;
	}

	.radioContainer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		// ::v-deep.u-radio-group--row{
		//     display: flex;
		//     flex-direction: row;
		//     flex-wrap: wrap;
		// 	justify-content: space-around;
		// }
		// ::v-deep.u-radio__icon-wrap--circle{
		// 	border-radius: 100%;
		// 	display: none;
		// }
		// ::v-deep.u-radio {
		//     display: flex;
		//     flex-direction: row;
		//     overflow: hidden;
		//     flex-direction: row;
		//     align-items: center;
		//     width: 46%;
		//     height: 90rpx;
		//     border: 2rpx solid #E0E0E0;
		//     display: flex;
		//     justify-content: center;
		// 	margin: 5px 0;
		// 	border-radius: 20px;
		// }
	}

	.selectOption {
		width: 46%;
		height: 5vh;
		line-height: 5vh;
		border: 2rpx solid #E0E0E0;
		border-radius: 40rpx;
		margin: 5px 0;
		text-align: center;
	}

	::v-deep.selectedColor {
		background-color: #3c9cff;
		color: white;
	}

	.btn {
		width: 50%;
		margin: 100rpx auto 0;
	}
</style>
